import React, { memo } from 'react';
import { useSelector, shallowEqual, useDispatch } from 'react-redux';

import { 
  changeCurrentPageAction,
  getCategorySongsAction
} from "../../store/actionCreators";

import SongsCover from "@/components/songs-cover";
import MyPagination from "@/components/pagination";
import { ListWrapper } from "./style";

const SongsList = memo(() => {
  const { categorySongs, currentPage } = useSelector(state => ({
    categorySongs: state.getIn(["songs", "categorySongs"]),
    currentPage: state.getIn(["songs", "currentPage"])
  }), shallowEqual);
  const songList = categorySongs.playlists || [];
  const total = categorySongs.total || 0;
  const dispatch = useDispatch();
  
  const onPageChange = (page) => {
    dispatch(changeCurrentPageAction(page));
    dispatch(getCategorySongsAction());
  };

  return (
    <ListWrapper>
      <div className="song-list">
        {
          songList.map(item => {
            return <SongsCover item={item} key={item.id} right="50px"/>
          })
        }
      </div>

      <MyPagination
        currentPage={currentPage}
        total={total}
        pageSize={35}
        onPageChange={onPageChange}
      />
    </ListWrapper>
  )
})

export default SongsList